/*
* @Author: Choisaaaa
* @Date: 2018/5/5  20:23
* 事件响应方法2 通过箭头函数提升作用域
*/

import React from  "react";
import ReactDOM from 'react-dom';

//事件的处理 ,事件的名称也是驼峰式命名

class ES6Component extends React.Component{
    constructor(props){
        super(props);
        this.state={
            name : "Mark",
            age : 18
        }
    }
    onAddAge(){ //定义按钮事件的相应方法
        this.setState({
            age : this.state.age+1
        });
    }
    onInputChange(e){//定义input输入框的相应事件
        this.setState({
            name : e.target.value
        });
    }
    render(){
        return (
            <div>
                <p>I am {this.state.name}</p>
                <p>I am {this.state.age} years old!</p>
                {/* 通过箭头函数来提升作用域 */}
                <input type="text" onChange={(e) => {this.onInputChange(e)}} />
                <button onClick = {(e)=>{this.onAddAge(e)}}>加一岁</button>
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <ES6Component />
    </div>,
    document.getElementById("Study")
);